<template>
  <div class="action_bar">
    <div class="search">
      <el-input
        class="input"
        v-model="keyword"
        prefix-icon="el-icon-search"
        placeholder="请输入内容"
        @change="$emit('input-change', keyword)"
        @keyup.enter.native="$emit('search-click')"
      ></el-input>
    </div>
    <div class="button_group">
      <el-button type="primary" icon="el-icon-search" @click="$emit('search-click')">搜索</el-button>
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        v-permission="['InsertUser']"
        @click="$emit('insert-click')"
      >添加</el-button>
      <el-button
        type="primary"
        icon="el-icon-edit"
        v-permission="['UpdateUser']"
        @click="$emit('edit-click')"
      >编辑</el-button>
      <el-button
        type="primary"
        icon="el-icon-delete"
        v-permission="['DeleteUser']"
        @click="$emit('delete-click')"
      >删除</el-button>
      <el-button
        type="primary"
        icon="el-icon-setting"
        @click="$emit('setting-permission-click')"
      >用户权限</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: ''
    }
  }
}
</script>

<style lang="stylus" scoped>
.action_bar
  display flex
  .search
    margin-right 10px
    .input
      max-width 300px
</style>
